<template>
  <div>
    <!--  -->
    <hr />
    <h3 class="choose-value">sn-radio 调用 ||</h3>
    <p class="choose-value">{{ valueTest }} ||</p>
    <!-- 组件使用 -->
    <sn-radio
      v-for="item in radioDemo"
      v-model="valueTest"
      :key="item.label"
      :radioName="item.name"
      :label="item.label"
      :disabled="item.disabled"
      :labelPosition="item.labelPosition"
    />
    <!--  -->
    <hr />
    <h3 class="choose-value">sn-radio-group 调用 ||</h3>
    <p class="choose-value">{{ valueGroupTest }} ||</p>
    <sn-radio-group v-model="valueGroupTest">
      <sn-radio
        v-for="item in radioGroupDemo"
        :key="item.label"
        :label="item.label"
        :disabled="item.disabled"
      />
    </sn-radio-group>
    <!--  -->
    <hr />
    <h3 class="choose-value">sn-radio 调用 border 模式 ||</h3>
    <p class="choose-value">{{ valueButtonTest }} ||</p>
    <sn-radio
      v-for="item in radioButtonDemo"
      v-model="valueButtonTest"
      type="border"
      :key="item.label"
      :radioName="item.name"
      :label="item.label"
      :disabled="item.disabled"
      :labelPosition="item.labelPosition"
    />
    <p></p>
    <sn-radio
      v-for="item in radioButtonDemo"
      v-model="valueButtonTest"
      type="border"
      :size="item.size"
      :key="item.label + item.size"
      :radioName="item.name"
      :label="item.label"
      :disabled="item.disabled"
      :labelPosition="item.labelPosition"
    />
    <h3 class="choose-value">sn-radio 调用 button 模式 ||</h3>
    <p class="choose-value">{{ valueButtonTest }} ||</p>
    <sn-radio
      v-for="item in radioButtonDemo"
      v-model="valueButtonTest"
      type="button"
      :key="item.label"
      :radioName="item.name"
      :label="item.label"
      :disabled="item.disabled"
      :labelPosition="item.labelPosition"
    />
    <p></p>
    <sn-radio
      v-for="item in radioButtonDemo"
      v-model="valueButtonTest"
      type="button"
      :size="item.size"
      :key="item.label + item.size"
      :radioName="item.name"
      :label="item.label"
      :disabled="item.disabled"
      :labelPosition="item.labelPosition"
    />
    <!--  -->
    <hr />
    <h3 class="choose-value">sn-radio-group 调用 button 模式 ||</h3>
    <h3 class="choose-value">sn-radio-group 调用 border 模式 ||</h3>
    <p class="choose-value">{{ valueButtonGroupTest }} ||</p>
    <sn-radio-group v-model="valueButtonGroupTest" type="button">
      <sn-radio
        v-for="item in radioButtonGroupDemo"
        :key="item.label"
        :label="item.label"
        :disabled="item.disabled"
      />
    </sn-radio-group>
    <!-- <sn-radio v-model="opt2" label="选项1" /> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueTest: "选项4",
      radioDemo: [
        {
          label: "选项1",
          name: "ans",
          labelPosition: null,
          disabled: null,
        },
        {
          label: "选项2",
          name: "ans",
          labelPosition: null,
          disabled: null,
        },
        {
          label: "选项3",
          name: "ans",
          labelPosition: null,
          disabled: null,
        },
        {
          label: "选项4",
          name: "ans",
          labelPosition: "front",
          disabled: null,
        },
      ],
      valueGroupTest: "选项3",
      radioGroupDemo: [
        {
          label: "选项1",
          disabled: null,
        },
        {
          label: "选项2",
          disabled: null,
        },
        {
          label: "选项3",
          disabled: null,
        },
        {
          label: "选项4",
          disabled: null,
        },
      ],
      valueButtonTest: "选项22",
      radioButtonDemo: [
        {
          label: "选项11",
          name: "ansButton",
          disabled: null,
          size: "default",
        },
        {
          label: "选项22",
          name: "ansButton",
          disabled: null,
          size: "medium",
        },
        {
          label: "选项33",
          name: "ansButton",
          disabled: null,
          size: "small",
        },
        {
          label: "选项44",
          name: "ansButton",
          disabled: null,
          size: "mini",
        },
      ],
      valueButtonGroupTest: "选项111",
      radioButtonGroupDemo: [
        {
          label: "选项111",
          disabled: null,
        },
        {
          label: "选项222",
          disabled: null,
        },
        {
          label: "选项333",
          disabled: null,
        },
        {
          label: "选项444",
          disabled: null,
        },
      ],
    };
  },
  computed: {
    checkedValue() {
      return this.radioDemo.map((item) => item.value);
    },
  },
};
</script>

<style scoped>
.choose-value {
  color: #999;
}
</style>
